<template>
  <div>
    <headers :head_title="head_title" />
    <div v-for="(item, index) in myArray_video_list" :key="index">
            <div class="collect_video">

              <video
                :src="item.originalUrl"
                autoplay
                muted
                class="fullscreen-video"
              ></video>
              <div>
                <p>{{ item.title }}</p>
                <p>视频时长:{{item.duration}}s</p>
                <p>视频购买时间:{{ item.createTime }}</p>
              </div>
            </div>
          </div>
  </div>
</template>

<script setup lang="ts">
import {findUserVideoBuyList} from '@/api/search.ts'
import {ref} from 'vue'
import headers from '@/components/header.vue'
import { Loading } from 'vant'
const head_title = ref('购买的视频')
const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
const page = ref(1)
const count = ref(5)

// 获取购买的视频并渲染
const myArray_video_list = ref([])
const collect_video = async () => {
  try {
    const res = await findUserVideoBuyList(userId.value, sessionId.value, {
      page: page.value,
      count: count.value,
    })
    console.log('用户收成病友圈列表', res)
    Loading.value = true //开启加载动画
    console.log(res)
    myArray_video_list.value = res.data.result
    console.log(myArray_video_list.value)
  } catch (e) {
    console.log('数据获取失败')
  }
}
collect_video()



</script>

<style scoped lang="scss">
.fullscreen-video{
  width: 150px;
  height: 180px;
}
.collect_video {
  display: flex;
  margin: 7.5px; // 15px * 0.5 = 7.5px
}
.consult_img {
  width: 100px; // 200px * 0.5 = 100px
  height: 85px; // 170px * 0.5 = 85px
}
.consult_list {
  display: flex;
  margin: 7.5px; // 15px * 0.5 = 7.5px
}
.consult_img {
  width: 100px; // 200px * 0.5 = 100px
  height: 85px; // 170px * 0.5 = 85px
  margin: 0 5px; // 10px * 0.5 = 5px
}
.collect_video {
  display: flex;
  margin-top: 10px;
}
</style>
